<template>
  <div class="data-container">
    <el-form inline=true>
      <el-form-item>
        <el-button v-show="!userExtend.edit"  @click="editData">编辑</el-button>
        <el-button type="success" v-show="userExtend.edit" @click="saveData">保存</el-button>
        <el-button v-show="userExtend.edit" @click="cancelEdit">取消</el-button>
      </el-form-item>
    </el-form>
    <el-form v-model="userExtend">
      <el-row>
        <el-col :span="8">
          <el-form-item label="人员类型：">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.personType" placeholder="请选择">
                <el-option value="应届毕业生" label="应届毕业生"></el-option>
                <el-option value="社会人员" label="社会人员"></el-option>
              </el-select>
            </template>
            <template v-else>
              {{ userExtend.personType}}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名：">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.name" maxlength=80 ></el-input>
            </template>
            <template v-else>
              {{ userExtend.name}}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别：">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.sex" placeholder="请选择">
                <el-option label="男" value="0" />
                <el-option label="女" value="1" />
              </el-select>
            </template>
            <template v-else>
              {{ userExtend.sex==0? '男':userExtend.sex==1?'女':'未知'}}
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="证件类型：">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.cardType" placeholder="请选择">
                <el-option value="身份证" label="身份证">身份证</el-option>
                <el-option value="护照" label="护照">护照</el-option>
                <el-option value="回乡证" label="回乡证">回乡证</el-option>
                <el-option value="外国人永久居留证" label="外国人永久居留证">外国人永久居留证</el-option>
                <el-option value="香港居民身份证" label="香港居民身份证">香港居民身份证</el-option>
                <el-option value="澳门居民身份证" label="澳门居民身份证">澳门居民身份证</el-option>
                <el-option value="台湾身份证" label="台湾身份证">台湾身份证</el-option>
                <el-option value="台胞证" label="台胞证">台胞证</el-option>
              </el-select>
            </template>
            <template v-else>
              {{ userExtend.cardType}}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码：">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.cardNo" maxlength=26></el-input>
            </template>
            <template v-else>
              {{ userExtend.cardNo}}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期:">
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.birthDate">
              </el-date-picker>
            </template>
            <template v-else>
              {{ userExtend.birthDate }}
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="年龄:">{{userExtend.age}}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.nation" filterable placeholder="请选择">
                <el-option v-for="item of NATIONS" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.nation }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.politicalLandscape" filterable placeholder="请选择">
                <el-option value="01|中国共产党党员" label="中国共产党党员">中国共产党党员</el-option>
                <el-option value="02|中国共产党预备党员" label="中国共产党预备党员">中国共产党预备党员</el-option>
                <el-option value="03|中国共产主义青年团团员" label="中国共产主义青年团团员">中国共产主义青年团团员</el-option>
                <el-option value="04|中国国民党革命委员会会员" label="中国国民党革命委员会会员">中国国民党革命委员会会员</el-option>
                <el-option value="05|中国民主同盟盟员" label="中国民主同盟盟员">中国民主同盟盟员</el-option>
                <el-option value="06|中国民主建国会会员" label="中国民主建国会会员">中国民主建国会会员</el-option>
                <el-option value="07|中国民主促进会会员" label="中国民主促进会会员">中国民主促进会会员</el-option>
                <el-option value="08|中国农工民主党党员" label="中国农工民主党党员">中国农工民主党党员</el-option>
                <el-option value="09|中国致公党党员" label="中国致公党党员">中国致公党党员</el-option>
                <el-option value="10|九三学社社员" label="九三学社社员">九三学社社员</el-option>
                <el-option value="11|台湾民主自治同盟盟员" label="台湾民主自治同盟盟员">台湾民主自治同盟盟员</el-option>
                <el-option value="12|无党派民主人士" label="无党派民主人士">无党派民主人士</el-option>
                <el-option value="13|群众" label="群众">群众</el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.politicalLandscape }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="国家/地区:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.country" filterable placeholder="请选择">
                <el-option v-for="item of COUNTRYS" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.country }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯：">
            <template v-if="userExtend.edit">
              <el-select v-model="province" filterable placeholder="请选择">
                <el-option v-for="item of CITYS" :key="item.province" :label="item.province" :value="item.province"></el-option>
              </el-select>
              <el-select v-model="city" filterable placeholder="请选择">
                <el-option v-for="item of cityE" :key="item.city" :label="item.city" :value="item.city"></el-option>
              </el-select>
              <el-select v-model="area" filterable placeholder="请选择">
                <el-option v-for="item of areaE" :key="item.area" :label="item.area" :value="item.area"></el-option>
              </el-select>
            </template>
            <template v-else>{{ nativePlace }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="英语等级：">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.englishLevel" placeholder="格式：六级,500"></el-input>
            </template>
            <template v-else>{{ userExtend.englishLevel }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="现所在单位：">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.workCompany" maxlength=120></el-input>
            </template>
            <template v-else>{{ userExtend.workCompany }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现工作医院等级：">
            <!--说明：非委培或定向的全日制应届生填“无”-->
            <template v-if="userExtend.edit">
              <el-select v-model="hospitalLevel" filterable placeholder="请选择">
                <el-option v-for="item of hospitalLevels" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.hospitalLevel }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现任党政管理职务：">
            <!--说明：非委培或定向的全日制应届生填“无”-->
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.duties" maxlength=36></el-input>
            </template>
            <template v-else>{{ userExtend.duties }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="现任党政管理职务时间：">
            <!--说明：非委培或定向的全日制应届生填“无”-->
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.dutiesDate">
              </el-date-picker>
            </template>
            <template v-else>{{ userExtend.dutiesDate }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="三甲医院工作时间（年）:">
            <template v-if="userExtend.edit">
              <el-input-number v-model="userExtend.workYears"></el-input-number>
            </template>
            <template v-else>{{ userExtend.workYears }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="本人是否具有研究生导师资格:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.tutorIntel" filterable placeholder="请选择">
                <el-option value="硕士研究生导师">硕士研究生导师</el-option>
                <el-option value="博士研究生导师">博士研究生导师</el-option>
                <el-option value="无">无</el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.tutorIntel }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="导师资格聘任时间：">
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.tutorIntelDate">
              </el-date-picker>
            </template>
            <template v-else>{{ userExtend.tutorIntelDate }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现专业技术资格:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.xzyjszg" filterable placeholder="请选择">
                <el-option value="1101|无">无</el-option>
                <el-option value="0101|教授">教授</el-option>
                <el-option value="0102|副教授">副教授</el-option>
                <el-option value="0103|助理教授">助理教授</el-option>
                <el-option value="0104|助教">助教</el-option>
                <el-option value="0201|研究员">研究员</el-option>
                <el-option value="0202|副研究员">副研究员</el-option>
                <el-option value="0203|助理研究员">助理研究员</el-option>
                <el-option value="0204|实习研究员">实习研究员</el-option>
                <el-option value="0301|网络规划设计师">网络规划设计师</el-option>
                <el-option value="0302|网络工程师">网络工程师</el-option>
                <el-option value="0303|网络管理员">网络管理员</el-option>
                <el-option value="0401|主任医师">主任医师</el-option>
                <el-option value="0402|副主任医师">副主任医师</el-option>
                <el-option value="0403|主治医师">主治医师</el-option>
                <el-option value="0404|医师">医师</el-option>
                <el-option value="0405|医士">医士</el-option>
                <el-option value="0501|主任药师">主任药师</el-option>
                <el-option value="0502|副主任药师">副主任药师</el-option>
                <el-option value="0503|主管药师">主管药师</el-option>
                <el-option value="0504|药师">药师</el-option>
                <el-option value="0505|药士">药士</el-option>
                <el-option value="0601|主任护师">主任护师</el-option>
                <el-option value="0602|副主任护师">副主任护师</el-option>
                <el-option value="0603|主管护师">主管护师</el-option>
                <el-option value="0604|护师">护师</el-option>
                <el-option value="0605|护士">护士</el-option>
                <el-option value="0701|主任技师">主任技师</el-option>
                <el-option value="0702|副主任技师">副主任技师</el-option>
                <el-option value="0703|主管技师">主管技师</el-option>
                <el-option value="0704|技师">技师</el-option>
                <el-option value="0705|技士">技士</el-option>
                <el-option value="0801|科员">科员</el-option>
                <el-option value="0802|副科">副科</el-option>
                <el-option value="0901|物理师">物理师</el-option>
                <el-option value="1001|未定级">未定级</el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.xzyjszg }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现专业技术资格取得时间：">
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.xzyjszgzyGainDate">
              </el-date-picker>
            </template>
            <template v-else>{{ userExtend.xzyjszgzyGainDate }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="现专业技术资格专业名称:">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.xzyjszgzymc"></el-input>
            </template>
            <template v-else>{{ userExtend.xzyjszgzymc }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专技职务/行政等级:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.zjzwxzdj" filterable placeholder="请选择">
                <el-option value="无">无</el-option>
                <el-option value="正高级">正高级</el-option>
                <el-option value="副高级">副高级</el-option>
                <el-option value="中级">中级</el-option>
                <el-option value="初级">初级</el-option>
                <el-option value="正处级">正处级</el-option>
                <el-option value="副处级">副处级</el-option>
                <el-option value="正科级">正科级</el-option>
                <el-option value="副科级">副科级</el-option>
                <el-option value="科员">科员</el-option>
                <el-option value="办事员">办事员</el-option>
                <el-option value="未定级">未定级</el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.zjzwxzdj }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现受聘专业技术职务:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.xspzyjszw" filterable placeholder="请选择">
                <el-option value="1101|无">无</el-option>
                  <el-option value="0101|教授">教授</el-option>
                  <el-option value="0102|副教授">副教授</el-option>
                  <el-option value="0103|助理教授">助理教授</el-option>
                  <el-option value="0104|助教">助教</el-option>
                  <el-option value="0201|研究员">研究员</el-option>
                  <el-option value="0202|副研究员">副研究员</el-option>
                  <el-option value="0203|助理研究员">助理研究员</el-option>
                  <el-option value="0204|实习研究员">实习研究员</el-option>
                  <el-option value="0301|网络规划设计师">网络规划设计师</el-option>
                  <el-option value="0302|网络工程师">网络工程师</el-option>
                  <el-option value="0303|网络管理员">网络管理员</el-option>
                  <el-option value="0401|主任医师">主任医师</el-option>
                  <el-option value="0402|副主任医师">副主任医师</el-option>
                  <el-option value="0403|主治医师">主治医师</el-option>
                  <el-option value="0404|医师">医师</el-option>
                  <el-option value="0405|医士">医士</el-option>
                  <el-option value="0501|主任药师">主任药师</el-option>
                  <el-option value="0502|副主任药师">副主任药师</el-option>
                  <el-option value="0503|主管药师">主管药师</el-option>
                  <el-option value="0504|药师">药师</el-option>
                  <el-option value="0505|药士">药士</el-option>
                  <el-option value="0601|主任护师">主任护师</el-option>
                  <el-option value="0602|副主任护师">副主任护师</el-option>
                  <el-option value="0603|主管护师">主管护师</el-option>
                  <el-option value="0604|护师">护师</el-option>
                  <el-option value="0605|护士">护士</el-option>
                  <el-option value="0701|主任技师">主任技师</el-option>
                  <el-option value="0702|副主任技师">副主任技师</el-option>
                  <el-option value="0703|主管技师">主管技师</el-option>
                  <el-option value="0704|技师">技师</el-option>
                  <el-option value="0705|技士">技士</el-option>
                  <el-option value="0801|科员">科员</el-option>
                  <el-option value="0802|副科">副科</el-option>
                  <el-option value="0901|物理师">物理师</el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.xspzyjszw }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="现专业技术职务聘任时间：">
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.xzyjszgzyGainDate">
              </el-date-picker>
            </template>
            <template v-else>{{ userExtend.xzyjszgzyGainDate }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现专业技术职务聘任专业名称:">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.xzyjszwprzymc"></el-input>
            </template>
            <template v-else>{{ userExtend.xzyjszwprzymc }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执业范围:">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.occupationRange"></el-input>
            </template>
            <template v-else>{{ userExtend.occupationRange }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="现教师系列专业技术职务所聘学校:">
            <template v-if="userExtend.edit">
              <el-input v-model="userExtend.teachSchool"></el-input>
            </template>
            <template v-else>{{ userExtend.teachSchool }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现教师系列专业技术职务:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.teachSchoolPost" placeholder="请选择">
                <option value="无">无</option>
                <option value="教授">教授</option>
                <option value="副教授">副教授</option>
                <option value="助理教授">助理教授</option>
                <option value="助教">助教</option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.teachSchoolPost }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现教师系列专业技术职务任职时间：">
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.teachSchoolDate">
              </el-date-picker>
            </template>
            <template v-else>{{ userExtend.teachSchoolDate }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="首次参加工作日期：">
            <template v-if="userExtend.edit">
              <el-date-picker
                type="date"
                placeholder="选择年月日"
                value-format="YYYY-MM-DD"
                v-model="userExtend.firstWorkDate">
              </el-date-picker>
            </template>
            <template v-else>{{ userExtend.firstWorkDate }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规培情况:">
            <template v-if="userExtend.edit">
              <el-select v-model="userExtend.teachSchoolPost" placeholder="请选择">
                <el-option value="已取得规培证">已取得规培证</el-option>
                <el-option value="四证合一，毕业时可考规培证">四证合一，毕业时可考规培证</el-option>
                <el-option value="暂无规培证">暂无规培证</el-option>
                <el-option value="无需规培">无需规培</el-option>
              </el-select>
            </template>
            <template v-else>{{ userExtend.teachSchoolPost }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学术兼职:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.academicPart"></el-input>
            </template>
            <template v-else>{{ userExtend.academicPart }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="获奖情况:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.awards"></el-input>
            </template>
            <template v-else>{{ userExtend.awards }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参与科研项目情况:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.scientificProject"></el-input>
            </template>
            <template v-else>{{ userExtend.scientificProject }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="科研项目汇总:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.scientificProjectCollect"></el-input>
            </template>
            <template v-else>{{ userExtend.scientificProjectCollect }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="第一作者或通讯作者发表论文论著情况:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.publications"></el-input>
            </template>
            <template v-else>{{ userExtend.publications }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他成果:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.otherFinding"></el-input>
            </template>
            <template v-else>{{ userExtend.otherFinding }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="科研成果汇总:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.findingCollect"></el-input>
            </template>
            <template v-else>{{ userExtend.findingCollect }}</template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="临床主要业绩:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.performance"></el-input>
            </template>
            <template v-else>{{ userExtend.performance }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入选何种人才计划、获得何种人才奖励及时间:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.talentPlan"></el-input>
            </template>
            <template v-else>{{ userExtend.talentPlan }}</template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注:">
            <template v-if="userExtend.edit">
              <el-input :rows="4" type="textarea" v-model="userExtend.notes"></el-input>
            </template>
            <template v-else>{{ userExtend.notes }}</template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, computed, onActivated } from 'vue'
import { COUNTRYS, NATIONS, CITYS } from '@/const/index'
import { addOrModify, info } from '@/api/applicant/userExtend'
import { ElMessage } from 'element-plus'

const userExtend = ref({})

// 省
const province = ref({})

// 市
const city = ref({})

const cityE = ref([])

const areaE = ref([])

onActivated(info().then(res => {
  userExtend.value = res
}))

const citys = () => {
  console.log(province.value)
  if (!province.value || Object.keys(province.value).length === 0) {
    return
  }
  CITYS.forEach(item => {
    if (item.province === province.value) {
      cityE.value = item.citys
    }
  })
}

watch(province, citys)

// 县
const area = ref({})

const areas = () => {
  if (!city.value || Object.keys(city.value).length === 0) {
    return
  }
  cityE.value.forEach(item => {
    if (item.city === city.value) {
      areaE.value = item.areas
    }
  })
}

watch(city, areas)

const editData = () => {
  userExtend.value.edit = true
}

const saveData = () => {
  userExtend.value.edit = false
  addOrModify(userExtend.value).then(res => {
    if (res) {
      ElMessage.success('更新成功')
    } else {
      ElMessage.error('更新失败')
    }
  })
}

const cancelEdit = () => {
  userExtend.value.edit = false
}

// const age = computed(() => {
// const currentDate = new Date()
// 判断出生年月日是否存在
// if (userExtend.value.birthDate) {
// console.log(currentDate - userExtend.value.birthDate)
// } else {
// return 1
// }
// return currentDate - userExtend.value.birthDate
// })

const nativePlace = computed(() => {
  if (!userExtend.value.province) {
    return ''
  }
  return userExtend.value.province + userExtend.value.city + userExtend.value.area
})
</script>

<style>

</style>
